<template>
    <div class="volunteerAudit">
        <m-title :title="title"></m-title>
        <div class="volunteer-aduit-container">
            <div class="aduit-name">
                <div class="left">
                    <span class="text">姓名</span>
                </div>
                <div class="right">
                    <input class="input-date" type="text" placeholder="请填写您的姓名" v-model="inputName" />
                </div>
            </div>
            <div class="aduit-phone">
                <div class="left">
                    <span class="text">手机</span>
                </div>
                <div class="right">
                    <input class="input-date" type="text" placeholder="请填写完整的手机号码" v-model="inputPhone" />
                </div>
            </div>
            <div class="aduit-desc">
                <div class="left">
                    <span class="text">个人介绍</span>
                </div>
                <div class="right">
                    <textarea class="input-textarea" v-model="inputTextarea" placeholder="说点什么吧..."></textarea>
                </div>
            </div>
            <div class="aduit-pic-one">
                <div class="left"></div>
                <div class="right">
                    <!-- 图片上传 -->
                    <div class="publish-images-list" v-show="isPhotoOne">
                        <i class="icon" @click.stop="addPicOne"></i>
                        <input class="inputFileOne" type="file" ref="inputFileOne" accept="image/jpeg,image/jpg,image/png" @change="onFileChangeOne" style="display: none;">
                    </div>
                    <!-- 上传图片展示 -->
                    <ul class="publish-images-item" v-show="!isPhotoOne">
                        <li class="publish-images-li" v-for="(item, index) in imgUrlsOne">
                            <a href="javascript:;" class="list-link">
                                <img @click="showImagePreviewOne(item, index)" class="list-link-img" :src="item" alt="" />
                            </a>
                            <span class="list-img-close" @click='delImageOne(index)'></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="aduit-card">
                <div class="left">
                    <span class="text">身份证</span>
                </div>
                <div class="right">
                    <input class="input-date" type="text" placeholder="请填写完整身份证号" v-model="inputCard" />
                </div>
            </div>
            <div class="aduit-pic-two">
                <div class="left"></div>
                <div class="right">
                    <!-- 图片上传 -->
                    <div class="publish-images-list" v-show="isPhotoTwo">
                        <i class="icon" @click.stop="addPicTwo"></i>
                        <input  class="inputFileTwo" type="file" ref="inputFileTwo" accept="image/jpeg,image/jpg,image/png" @change="onFileChangeTwo" style="display: none;">
                    </div>
                    <!-- 上传图片展示 -->
                    <ul class="publish-images-item" v-show="!isPhotoTwo">
                        <li class="publish-images-li" v-for="(item, index) in imgUrlsTwo">
                            <a href="javascript:;" class="list-link">
                                <img @click="showImagePreviewTwo(item, index)" class="list-link-img" :src="item" alt="" />
                            </a>
                            <span class="list-img-close" @click='delImageTwo(index)'></span>
                        </li>
                    </ul>
                    <!-- 图片上传 -->
                    <div class="publish-images-list two-pic" v-show="isPhotoThree">
                        <i class="icon" @click.stop="addPicThree"></i>
                        <input  class="inputFileThree" type="file" ref="inputFileThree" accept="image/jpeg,image/jpg,image/png" @change="onFileChangeThree" style="display: none;">
                    </div>
                    <!-- 上传图片展示 -->
                    <ul class="publish-images-item" v-show="!isPhotoThree">
                        <li class="publish-images-li" v-for="(item, index) in imgUrlsThree">
                            <a href="javascript:;" class="list-link">
                                <img @click="showImagePreviewThree(item, index)" class="list-link-img" :src="item" alt="" />
                            </a>
                            <span class="list-img-close" @click='delImageThree(index)'></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="audit-btn">
                <div class="audit-btn-item" @click="cancelAudit">取消</div>
                <div class="audit-btn-item love-btn" @click="submitAudit">确认申请</div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import { Toast } from 'vant'
    import { Dialog } from 'vant'
    import { ImagePreview } from 'vant'

    export default {
        data () {
            return {
                title: "成员申请",
                inputName: "",
                inputPhone: "",
                inputTextarea: "",
                inputCard: "",
                imgUrlsOne: [],
                isPhotoOne: true,
                imgUrlsTwo: [],
                isPhotoTwo: true,
                isPhotoThree: true,
                imgUrlsThree: []
            }
        },
        methods: {
            cancelAudit () {
                this.imgUrlsOne = []
                this.imgUrlsTwo = []
                this.imgUrlsThree = []
                this.$router.go(-1)
                this.inputName = ""
                this.inputPhone = ""
                this.inputTextarea = ""
                this.inputCard = ""
            },
            submitAudit () {
                if (this.inputName === "") {
                    Toast("请填写您的姓名！")
                    return
                }
                if (this.inputPhone === "") {
                    Toast("手机号码不能为空！")
                    return
                }
                if (!this.checkphone(this.inputPhone)) {
                    Toast("手机号格式不正确！")
                    return
                }
                if (this.inputTextarea === "") {
                    Toast("个人介绍不能为空！")
                    return
                }
                if (this.inputCard === "") {
                    Toast("身份证不能为空")
                    return
                }
                if (!this.checkCardId(this.inputCard)) {
                    Toast("身份证不合法！")
                    return
                }
                if (this.imgUrlsOne.length === 0 || this.imgUrlsTwo.length === 0 || this.imgUrlsThree.length === 0) {
                    Toast("照片不能为空！")
                    return
                }
                // 数据提交
                axios.post('/api/index.php?g=Api&m=Ucenter&a=subvolunteer', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    teamid: this.$route.params.id,
                    truename: this.inputName,
                    mobile: this.inputPhone,
                    info: this.inputTextarea,
                    idcardno: this.inputCard,
                    pic: this.imgUrlsOne,
                    idcardfront: this.imgUrlsTwo,
                    idcardback: this.imgUrlsThree
                }).then((res) => {
                    console.log(res)
                    if (res.data.rescode=='0000') {
                        // 提交数据
                        Dialog.alert({
                            message: '申请成功，审核通过方可显示！'
                        }).then(() => {
                            this.cancelAudit()
                        })
                    }
                }).catch(function (error) {
                    
                })
            },
            addPicOne () {
                const event = new MouseEvent('click');
                this.$refs.inputFileOne.dispatchEvent(event)
            },
            addPicTwo () {
                const event = new MouseEvent('click');
                this.$refs.inputFileTwo.dispatchEvent(event)
            },
            addPicThree () {
                const event = new MouseEvent('click');
                this.$refs.inputFileThree.dispatchEvent(event)
            },
            onFileChangeOne (e) {
                var files = e.target.files || e.dataTransfer.files
                if(!files.length) return
                this.createImageOne(files,e)
            },
            onFileChangeTwo (e) {
                var files = e.target.files || e.dataTransfer.files
                if(!files.length) return
                this.createImageTwo(files,e)
            },
            onFileChangeThree (e) {
                var files = e.target.files || e.dataTransfer.files
                if(!files.length) return
                this.createImageThree(files,e)
            },
            // 创建图片列表
            createImageOne (file, e) {
                let vm = this;
                // 一次上传多张
                for (var i=0;i<file.length;i++) {
                    lrz(file[i], { width: 480 }).then(function(rst) {
                        vm.imgUrlsOne.push(rst.base64);
                        return rst;
                    }).always(function() {
                        // 清空文件上传控件的值
                        e.target.value = null;
                    })
                }
            },
            createImageTwo (file, e) {
                let vm = this;
                // 一次上传多张
                for (var i=0;i<file.length;i++) {
                    lrz(file[i], { width: 480 }).then(function(rst) {
                        vm.imgUrlsTwo.push(rst.base64);
                        return rst;
                    }).always(function() {
                        // 清空文件上传控件的值
                        e.target.value = null;
                    })
                }
            },
            createImageThree (file, e) {
                let vm = this;
                // 一次上传多张
                for (var i=0;i<file.length;i++) {
                    lrz(file[i], { width: 480 }).then(function(rst) {
                        vm.imgUrlsThree.push(rst.base64);
                        return rst;
                    }).always(function() {
                        // 清空文件上传控件的值
                        e.target.value = null;
                    })
                }
            },
            // 删除图片
            delImageOne (index) {
                let vm = this;
                Dialog.confirm({
                    message: "确定删除该图片"
                }).then(() => {
                    vm.imgUrlsOne.splice(index, 1);
                }).catch(() => {
                    Dialog.close()
                })
            },
            delImageTwo (index) {
                let vm = this;
                Dialog.confirm({
                    message: "确定删除该图片"
                }).then(() => {
                    vm.imgUrlsTwo.splice(index, 1);
                }).catch(() => {
                    Dialog.close()
                })
            },
            delImageThree (index) {
                let vm = this;
                Dialog.confirm({
                    message: "确定删除该图片"
                }).then(() => {
                    vm.imgUrlsThree.splice(index, 1);
                }).catch(() => {
                    Dialog.close()
                })
            },
            // 预览图片
            showImagePreviewOne (item, index) {
                const instance = ImagePreview(this.imgUrlsOne, index)
            },
            showImagePreviewTwo (item, index) {
                const instance = ImagePreview(this.imgUrlsTwo, index)
            },
            showImagePreviewThree (item, index) {
                const instance = ImagePreview(this.imgUrlsThree, index)
            },
            // 验证手机号
            checkphone (phone) {
                if (!(/^1[34578]\d{9}$/.test(phone))||phone=="") {
                    return false
                } else {
                    return true
                }
            },
            // 验证身份证
            checkCardId (cardId) {
                if (!(/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(cardId))) {
                    return false
                } else {
                    return true
                }
            }
        },
        watch: {
            imgUrlsOne () {
                if (this.imgUrlsOne.length >= 1) {
                    this.isPhotoOne = false
                } else {
                    this.isPhotoOne = true
                }
            },
            imgUrlsTwo () {
                if (this.imgUrlsTwo.length >= 1) {
                    this.isPhotoTwo = false
                } else {
                    this.isPhotoTwo = true
                }
            },
            imgUrlsThree () {
                if (this.imgUrlsThree.length >= 1) {
                    this.isPhotoThree = false
                } else {
                    this.isPhotoThree = true
                }
            }
        },
        components: {mTitle},
        created () {
            let u = navigator.userAgent
            if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
                this.$nextTick(() => {
                    document.querySelector(".inputFileOne").setAttribute('capture','camera')
                    document.querySelector(".inputFileTwo").setAttribute('capture','camera')
                    document.querySelector(".inputFileThree").setAttribute('capture','camera')
                })
            }
        }
    }
</script>

<style lang="stylus">
    .volunteerAudit
        width: 100%
        min-height: 100%
        position: relative
        background: #fff
        padding-bottom: 60px
        .volunteer-aduit-container
            width: 100%
            padding: 0 15px
            box-sizing: border-box
            .aduit-name,.aduit-phone,.aduit-desc,.aduit-card
                display: flex
                margin-top: 16px
                box-sizing: border-box
                height: 34px
                align-items: center
                width: 100%
                overflow: hidden
                .left
                    flex: 0 0 76px
                    width: 76px
                    text-align: right
                    .text
                        font-size: 16px
                        color: #353535
                        display: inline-block
                        vertical-align: middle
                        margin-left: 6px 
                .right
                    margin-left: 10px
                    flex: 1
                    width: 100%
                    overflow: hidden
                    font-size: 0
                    .input-date
                        width: 100%
                        height: 34px
                        line-height: 34px
                        box-sizing: border-box
                        display: inline-block
                        border-bottom: 1px solid #eee
                        font-size: 16px
                        border-radius: 0
                    .input-textarea
                        width: 100%
                        height: 140px
                        padding: 10px 6px
                        box-sizing: border-box
                        border: 1px solid #eee
                        font-size: 16px
            .aduit-desc
                height: 140px
                align-items: inherit
            .aduit-pic-one
                width: 100%
                display: flex
                margin-top: 16px
                .left
                    flex: 0 0 76px
                    width: 76px
                    text-align: right
                .right
                    flex: 1
                    margin-left: 10px
                    .publish-images-list
                        width: 100%
                        box-sizing: border-box
                        .icon
                            background: url('./icon1.png') no-repeat
                            width: 100px
                            height: 100px
                            background-size: 100% 100%
                            display: inline-block
                    .publish-images-item
                        width: 100%
                        box-sizing: border-box
                        font-size: 0
                        .publish-images-li
                            display: inline-block
                            width: 100px
                            height: 100px
                            margin-right: 10px
                            margin-bottom: 10px
                            position: relative
                            .list-link
                                width: 100%
                                height: 100px
                                .list-link-img
                                    width: 100%
                                    height: 100%
                            .list-img-close
                                background: url('./icon2.png') no-repeat
                                width: 16px
                                height: 16px
                                position: absolute
                                top: 6px
                                right: 6px
                                background-size: 100% 100%
            .aduit-pic-two
                width: 100%
                display: flex
                margin-top: 16px
                .left
                    flex: 0 0 76px
                    width: 76px
                    text-align: right
                .right
                    flex: 1
                    margin-left: 10px
                    .publish-images-list
                        width: 100px
                        box-sizing: border-box
                        display: inline-block
                        .icon
                            background: url('./icon3.png') no-repeat
                            width: 100px
                            height: 100px
                            background-size: 100% 100%
                            display: inline-block
                        &.two-pic
                            display: inline-block
                            .icon
                                background: url('./icon4.png') no-repeat
                                width: 100px
                                height: 100px
                                background-size: 100% 100%
                                display: inline-block
                    .publish-images-item
                        width: 100px
                        box-sizing: border-box
                        font-size: 0
                        display: inline-block
                        .publish-images-li
                            display: inline-block
                            width: 100px
                            height: 100px
                            margin-right: 10px
                            margin-bottom: 10px
                            position: relative
                            .list-link
                                width: 100%
                                height: 100px
                                .list-link-img
                                    width: 100%
                                    height: 100%
                            .list-img-close
                                background: url('./icon2.png') no-repeat
                                width: 16px
                                height: 16px
                                position: absolute
                                top: 6px
                                right: 6px
                                background-size: 100% 100%
            .audit-btn
                margin-top: 30px
                height: 40px
                font-size: 0
                width: 100%
                .audit-btn-item
                    width: 40%
                    background: #aaa
                    height: 38px
                    display: inline-block
                    font-size: 16px
                    margin-left: 7%
                    line-height: 38px
                    text-align: center
                    color: #fff
                    border-radius: 20px
                    &.love-btn
                        background: #f8624a
</style>